<!--
 * @Author: wuzhen
 * @Date: 2019-01-23 11:05:41
 * @LastEditors  : wuzhen
 * @LastEditTime : 2020-01-11 14:17:35
 * @Description: table表格组件
 -->
<template>
  <div class="table-list">
    <Table ref="table" :row-class-name="rowClassName" :loading="tableLoading" :columns="columns" :data="tableData" @on-selection-change="(e) => $emit('on-selection-chang', e)">
      <template slot-scope="{row}" slot="action" v-if="handleBtn.length>0">
        <template v-for="(item, index) in handleBtn">
          <span :key="index">
            <Divider type="vertical" v-if="index!==0" />
            <slot :item="item" :row="row" :name="item.btnType" v-if="item.slot" />
            <Poptip confirm :title="item.poptip && item.poptip.title" @on-ok="handleClick(item.btnType, row)" v-else-if="item.poptip">
              <span :class="[item.type?item.type:'primary']">{{item.text}}</span>
            </Poptip>
            <span :class="[item.type?item.type:'primary']" @click="handleClick(item.btnType, row)" v-else>{{item.text}}</span>
          </span>
        </template>
      </template>
      <div slot="footer" v-if="totalData.length>0">
        <Table :columns="columns" class="totalTable" :data="totalData" :show-header="false">
          <template slot="action">
            <span>--</span>
          </template>
        </Table>
      </div>
    </Table>
    <!-- 分页 -->
    <div v-if="showPage" style="overflow: hidden">
      <Page class-name="page" :show-sizer="showSizer" :page-size-opts="[15,30,50,100]" show-total :page-size="flipper['limit']" :total="totalCount" :current="(flipper['offset']/flipper['limit']) + 1" @on-change="changePage" @on-page-size-change="changePageSize"></Page>
    </div>
    <!-- 删除 -->
    <Delete ref="deleteModal" :delete-modal="deleteModal" @submit-delete="onSubmitdelete" @on-change="(isShow) => deleteModal=isShow"></Delete>
    <slot></slot>
  </div>
</template>

<script>
import Delete from "./Delete.vue";
export default {
  components: {
    Delete
  },
  props: {
    // 表格数据获取接口api方法
    searchApi: {
      type: Function
    },
    // 表格数据删除api方法
    delApi: { type: Function },
    // 表格标题
    columns: {
      type: Array,
      default: () => []
    },
    // 表格按钮控制
    handleBtn: {
      type: Array,
      default: () => []
    },
    // 是否显示分页
    showPage: {
      type: Boolean,
      default: true
    },
    // 是否显示页码
    showSizer: {
      type: Boolean,
      default: true
    },
    totalData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tableLoading: false,
      flipper: {
        offset: 0,
        limit: 15
      },
      totalCount: 0,
      deleteModal: false,
      tableData: []
    };
  },
  methods: {
    // 获取表格数据
    async getData(params = {}) {
      try {
        this.tableLoading = true;
        this.searchParams = params;
        // 分页参数
        this.flipper = this.searchParams["flipper"];
        const res = await this.searchApi(this.searchParams);
        this.tableData = res.result.rows || [];
        this.totalCount = res.result.total || 0;
        this.tableLoading = false;
        this.$nextTick(() => {
          this.$emit("get-table-data", res.data);
        });
      } catch (error) {
        this.$Message.error("获取数据失败");
        this.tableLoading = false;
      }
    },
    // 表格操作
    handleClick(type, row) {
      switch (type) {
        case "delete": // 删除
          this._onDelete(row);
          break;
        default:
          this.$emit("handle-click", type, row);
          break;
      }
    },
    // 删除
    _onDelete(row) {
      this.deleteModal = true;
      this.deleteIndex = row._index;
      this.deleteId = row.id;
    },
    // 导出
    onExport() {
      this.$Spin.show();
      this.searchApi({
        ...this.searchParams,
        ...{
          export: true
        }
      })
        .then(res => {
          location.href = res.data.path;
          this.$Spin.hide();
        })
        .catch(() => {
          this.$Message.error("数据导出失败");
          this.$Spin.hide();
        });
    },
    // 确定删除
    async onSubmitdelete() {
      try {
        const res = await this.delApi({ id: this.deleteId });
        if (res.code === 10000) {
          this.tableData.splice(this.deleteIndex, 1);
          // btnLoading为false
          this.$refs.deleteModal.btnLoading(false);
          this.deleteModal = false;
          this.totalCount--;
          this.$Message.success("删除成功！");
        } else {
          this.$refs.deleteModal.btnLoading(false);
          this.deleteModal = false;
          this.$Message.error(res.error);
        }
      } catch (error) {
        throw new Error(error);
      }
    },
    // 修改页码
    changePage(val) {
      this.searchParams["flipper"]["offset"] =
        (val - 1) * this.flipper["limit"];
      this.getData(this.searchParams);
    },
    // 修改显示条数
    changePageSize(val) {
      this.searchParams["flipper"]["limit"] = val;
      this.getData(this.searchParams);
    },
    rowClassName(row) {
      if (row.deleted_at) {
        return "table-disabled-row";
      }
      return "";
    }
  }
};
</script>

<style lang="less" scoped>
.table-list {
  position: relative;
  .page {
    margin: 20px 0 10px;
    overflow: hidden;
    float: right;
  }
}
</style>
